<template>
  <div>
    <div class="banner">
      <div class="imgs">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in imgs" :key="index">
            <img :src="item.pic" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 热门歌单数据 -->
    <div class="remLists">
      <div class="title">推荐歌单</div>
      <div class="content">
        <ul>
          <li v-for="(item, index) in personalized" :key="index">
            <router-link
              tag="div"
              class="img"
              :to="{
                name: 'ranklist',
                query: { id: item.id, name: item.name },
              }"
            >
              <img :src="item.picUrl" alt="" />
            </router-link>
            <!-- <div class="img">
              <img :src="item.picUrl" alt="" />
            </div> -->
            <span
              ><i class="iconfont icon-icon-"></i
              >{{ item.playCount | playCountNum }}</span
            >
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </div>
    </div>

    <!-- 热门歌手 -->
    <div class="radioStation">
      <div class="title">热门歌手</div>
      <div class="tation">
        <ul>
          <li
            v-for="(item, index) in vocalists"
            :key="index"
            @click="getInto(item.id)"
          >
            <img :src="item.picUrl" alt="" />
            <div>{{ item.name }}</div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 推荐电台 -->
    <div class="radioStation">
      <div class="title">推荐电台</div>
      <div class="tation">
        <ul>
          <li v-for="(item, index) in latestradio" :key="index">
            <img :src="item.picUrl" alt="" />
            <div>{{ item.name }}</div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 最新音乐 -->
    <div class="latestMusic">
      <h4>最新音乐</h4>
      <div class="musicsort">
        <ul>
          <li
            v-for="(item, index) in latestMusic"
            :key="index"
            @click="addByEnterKey(item.id)"
          >
            <div class="sortleft">
              <div>
                {{ item.name }} <span>{{ item.song.alias[0] }}</span>
              </div>
              <div>
                {{ item.song.artists[0].name }}- <span>{{ item.name }}</span>
              </div>
            </div>
            <div class="sortright">
              <span class="iconfont icon-zanting1"></span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBanner,
  getPersonalized,
  thelatestMusic,
  thelatestradio,
  thevocalist,
} from "../api/recommend";

export default {
  data() {
    return {
      imgs: null,
      personalized: null,
      latestMusic: null,
      latestradio: null,
      vocalists: [],
      // fals:null
    };
  },
  methods: {
    getInto(id) {
      this.$router.push({ name: "Singerdetails", query: { id } });
    },

    addByEnterKey(id) {
      this.$parent.getPlayerId(id);
      // console.log(id);
    },

    getBannerFun() {
      // 轮播图数据
      getBanner().then((data) => {
        if (data.code == 200) {
          this.imgs = data.banners;
        }
      });
    },

    getPersonalizedFun() {
      // 热门歌单数据
      getPersonalized().then((data) => {
        if (data.code == 200) {
          // console.log(data);
          this.personalized = data.result;
        }
      });
    },
    sonalizedFun() {
      // 热门歌单数据
      thelatestMusic().then((data) => {
        if (data.code == 200) {
          // console.log(data);
          this.latestMusic = data.result;
        }
      });
    },

    sonaliradio() {
      // 电台
      thelatestradio().then((data) => {
        if (data.code == 200) {
          // console.log(data);
          this.latestradio = data.result;
        }
      });
    },

    sonavocalist() {
      thevocalist({ limit: 15 }).then((data) => {
        if (data.code == 200) {
          this.vocalists = data.artists;
          // console.log(this.vocalists);
        }
      });
    },
  },

  created() {
    this.getBannerFun();
    this.getPersonalizedFun();
    this.sonalizedFun();
    this.sonaliradio();
    this.sonavocalist();
  },
  filters: {
    playCountNum(value) {
      let w = value > 10000 ? value / 10000 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
  // destroyed() {
  //   console.log("销毁");
  // },
};
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  text-align: center;
  position: relative;
  &::after {
    background-color: #d4473c;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    width: 100%;
    height: 132px;
    content: "";
    display: block;
  }
  .imgs {
    margin: auto;
    min-height: 100px;
    background: turquoise;
    width: 96%;
    border-radius: 5px;
    .my-swipe {
      min-height: 100px;
      img {
        width: 100%;
        border-radius: 5px;
      }
    }
  }
}
.remLists {
  .title {
    height: 60px;
    line-height: 60px;
    text-indent: 5px;
    font-size: 16px;
    color: #000;
    font-weight: bold;
  }
  .content {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      li {
        flex: 0 0 32%;
        position: relative;
        span {
          position: absolute;
          top: 0px;
          right: 0px;
          color: #fff;
          font-size: 10px;
          i {
            font-size: 15px;
            vertical-align: middle;
          }
        }
        .img {
          background-color: aqua;
          min-height: 50px;
          width: 100%;
          border-radius: 3px;
          img {
            width: 100%;
            border-radius: 3px;
          }
        }
        p {
          font-size: 12px;
          color: #565658;
          line-height: 15px;
          padding: 5px;
          margin-bottom: 10px;
        }
      }
    }
  }
}

.radioStation {
  width: 100%;
  margin-bottom: 10px;
  // height: 250px;
  // background-color: aqua;
  .title {
    height: 50px;
    line-height: 50px;
    text-indent: 5px;
    font-size: 16px;
    color: #000;
    font-weight: bold;
  }
  .tation {
    width: 100%;
    height: 160px;
    // background-color: aquamarine;
    ul {
      width: 100%;
      box-sizing: border-box;
      padding-left: 10px;
      padding-right: 10px;
      // text-overflow: ellipsis; //超出用...显示
      white-space: nowrap; //不换行
      overflow-x: auto;
      li {
        width: 140px;
        height: 150px;
        display: inline-block;
        // background-color: #888;
        text-align: center;
        position: relative;
        // span {
        //   position: absolute;
        //   top: 27%;
        //   left: 30%;
        //   img {
        //     width: 40px;
        //   }
        // }
        img {
          width: 120px;
          border-radius: 20px;
        }
        div {
          text-align: center;
          margin-top: 10px;
          width: 120px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

.latestMusic {
  width: 100%;
  display: flex;
  flex-direction: column;
  h4 {
    position: relative;
    padding-left: 9px;
    margin-bottom: 14px;
    font-size: 17px;
    height: 20px;
    line-height: 20px;
    &:after {
      content: " ";
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -9px;
      width: 2px;
      height: 16px;
      background-color: #d33a31;
    }
  }
  .musicsort {
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    ul {
      width: 100%;
      li {
        width: 100%;
        display: flex;
        margin-bottom: 7px;
        .sortleft {
          width: 80%;
          display: inline-block;
          display: flex;
          flex-direction: column;
          div:nth-child(1) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: normal;
            margin-bottom: 2px;
            font-size: 15px;
            span {
              color: #888;
            }
          }
          div:nth-child(2) {
            font-size: 9px;
            color: #888;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: normal;
          }
        }
        .sortright {
          width: 20%;
          display: inline-block;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>